<template>
  <div class="container">
    <div class="nav-bar flex">
      <div @click="toggleRecommendType" :class="{active:searchmode==0&&!isFilterDialogShowed&&!isCategoryDialogShowed}">推荐</div>
      <div @click="showFilterDialog" :class="{active:isFilterDialogShowed||(searchmode==1&&!isCategoryDialogShowed)}">筛选</div>
      <div @click="showCategoryDialog" :class="{active:isCategoryDialogShowed||(searchmode==2&&!isFilterDialogShowed)}">分类</div>
      <router-link tag="div" :to="'/search'">
        <img src="../../assets/icons/seachicon@2x.png" alt="" class="searchicon"> 搜索
      </router-link>
    </div>
    <div class="nav-bar-before"></div>
    <div class="filter-area-masker" @click="hideFilterDialog" v-show="isFilterDialogShowed">
      <div class="filter-area" @click.stop="noop">
        <div class="filter-area-inner">
          <img src="../../assets/icons/goods/commenthigh.png" alt="" @click="toggleSortType(1)">
          <img src="../../assets/icons/goods/pointshigh.png" alt="" @click="toggleSortType(2)">
          <img src="../../assets/icons/goods/moneyhigh.png" alt="" @click="toggleSortType(3)">
          <img src="../../assets/icons/goods/salehigh.png" alt="" @click="toggleSortType(4)">
          <img src="../../assets/icons/goods/pointslow.png" alt="" @click="toggleSortType(5)">
          <img src="../../assets/icons/goods/lowmoney.png" alt="" @click="toggleSortType(6)">
        </div>
      </div>
    </div>
    <div class="category-area-masker" v-show="isCategoryDialogShowed">
      <div class="category-p border-b">
        <div class="flex">
          <div class="category-blue-line"></div>
          <div class="category-txt">智能推荐</div>
        </div>
        <div class="category-items">
          <div class="category-item-wrap" v-if="categoryFiltersData.tehuituijian">
            <div class="category-item flex" :class="{'category-selected':categoryFilters.smartRecommend=='tehuituijian'}" @click="toggleCategoryType('smartRecommend','tehuituijian')">
              <img src="../../assets/icons/category/you.png" alt="" class="category-item-img">
              <div class="category-item-txt">特惠推荐</div>
            </div>
          </div>
          <div class="category-item-wrap" v-if="categoryFiltersData.xinpintuijian">
            <div class="category-item flex" :class="{'category-selected':categoryFilters.smartRecommend=='xinpintuijian'}" @click="toggleCategoryType('smartRecommend','xinpintuijian')">
              <img src="../../assets/icons/category/newgoods@2x.png" alt="" class="category-item-img">
              <div class="category-item-txt">新品推荐</div>
            </div>
          </div>
        </div>
      </div>
      <div class="category-p border-b">
        <div class="flex">
          <div class="category-blue-line"></div>
          <div class="category-txt">支付方式</div>
        </div>
        <div class="category-items clearfix">
          <div class="category-item-wrap" v-if="categoryFiltersData.haspoints">
            <div class="category-item flex" :class="{'category-selected':categoryFilters.paymentType=='haspoints'}" @click="toggleCategoryType('paymentType','haspoints')">
              <img src="../../assets/icons/category/haspoints@2x.png" alt="" class="category-item-img">
              <div class="category-item-txt">含积分</div>
            </div>
          </div>
          <div class="category-item-wrap" v-if="categoryFiltersData.hasweixin">
            <div class="category-item flex" :class="{'category-selected':categoryFilters.paymentType=='hasweixin'}" @click="toggleCategoryType('paymentType','hasweixin')">
              <img src="../../assets/icons/category/weixin@2x.png" alt="" class="category-item-img">
              <div class="category-item-txt">含微信</div>
            </div>
          </div>
          <div class="category-item-wrap" v-if="categoryFiltersData.hasdianziquan">
            <div class="category-item flex" :class="{'category-selected':categoryFilters.paymentType=='hasdianziquan'}" @click="toggleCategoryType('paymentType','hasdianziquan')">
              <img src="../../assets/icons/category/coupons@2x.png" alt="" class="category-item-img">
              <div class="category-item-txt">含电子券</div>
            </div>
          </div>

        </div>
      </div>
      <div class="category-p border-b">
        <div class="flex">
          <div class="category-blue-line"></div>
          <div class="category-txt">商品类别</div>
        </div>
        <div class="category-items">
          <div class="category-item-wrap" :key="item.id" v-for="item in categoryFiltersData.categories">
            <div class="category-item flex" @click="toggleCategoryType('goodsCategory',item.id)" :class="{'category-selected':categoryFilters.goodsCategory==item.id}">
              <img :src="item.cover|absUrl" alt="" class="category-item-img">
              <div class="category-item-txt">{{item.title}}</div>
            </div>
          </div>
        </div>
      </div>

      <div class="category-p border-b">
        <div class="flex">
          <div class="category-blue-line"></div>
          <div class="category-txt">品牌选择</div>
        </div>
        <div class="category-items">
          <div class="category-item-wrap" :key="item.id" v-for="item in categoryFiltersData.brands">
            <div class="category-item flex" @click="toggleCategoryType('goodsBrand',item.id)" :class="{'category-selected':categoryFilters.goodsBrand==item.id}">
              <img :src="item.cover|absUrl" alt="" class="category-item-img">
              <div class="category-item-txt">{{item.title}}</div>
            </div>
          </div>

        </div>
      </div>
      <div class="categorybtns-before"></div>
      <div class="categorybtns flex">
        <div class="categorybtn flex-con" @click="hideCategoryDialog">取消</div>
        <div class="categorybtn flex-con" @click="doToggleCategoryType">确定</div>
      </div>

    </div>
    <xd-datalist ref="datalist" :url="isTj>0?'/api/tj_goods_list':('/api/goods_list?tagId='+($route.query.tag||0))">
      <div class="box1-wrap" slot-scope="scope">
        <div class="box1" v-for="(item,index) in scope.list" :key="index" @click="showGoodsDetail(item.id)">
          <xd-img :src="item.cover|absUrl" alt="" class="box1-cover" />
          <div class="goods-tag" v-if="item.tag" :class="'goods-'+getTagClass(item.tag)">{{item.tag}}</div>
          <div class="goods-info">
            <div class="goods-title one-line">
              {{item.title}}
            </div>
            <div class="goods-points-area">
              <span class="goods-points" v-if="item.points>0">{{item.points}}积分</span><template v-if="item.points>0 && item.price>0">+</template><span class="goods-money" v-if="item.price>0">{{item.price}}元</span>
            </div>
            <div class="huiyuan-goods-points-area" v-if="item.sourcePoints!=null">
              会员价:<template v-if="item.sourcePoints>0">{{item.sourcePoints}}积分</template><template v-if="item.sourcePoints>0 && item.sourcePrice>0 "> + </template><template v-if="item.sourcePrice>0">{{item.sourcePrice}}元</template>
            </div>
          </div>
        </div>
      </div>
    </xd-datalist>


    <xd-footer v-if="!isTj&&tagId==0"></xd-footer>
  </div>
</template>
<script>
export default {
  data() {
    return {
      isFilterDialogShowed: false,
      isCategoryDialogShowed: false,
      isTj: false,
      searchmode: 0,
      categoryFiltersData: {},
      categoryFilters: {
        smartRecommend: "",
        paymentType: "",
        goodsCategory: 0,
        goodsBrand: 0
      },
      tagId: 0,
      list: []
    };
  },
  created() {
    this.isTj = this.$route.meta.tj || 0;
    this.tagNameStack = [];
    this.tagId = this.$route.query.tag || 0;
    this.$post("/api/goods_category_filter").then(data => {
      this.categoryFiltersData = data;
    });
  },
  methods: {
    toggleCategoryType(typeName, typeValue) {
      if (this.categoryFilters[typeName] == typeValue) {
        this.categoryFilters[typeName] = 0;
      } else {
        this.categoryFilters[typeName] = typeValue;
      }
    },
    getTagClass(tagName) {
      let idx;
      if ((idx = this.tagNameStack.indexOf(tagName)) != -1) {
        return idx % 3 + 1;
      }
      this.tagNameStack.push(tagName);
      return (this.tagNameStack.length - 1) % 3 + 1;
    },
    doToggleCategoryType() {
      this.$refs.datalist
        .clearParams()
        .addParam("categoryFilters", this.categoryFilters)
        .refresh();
      this.hideCategoryDialog();
      this.searchmode = 2;
    },
    toggleRecommendType() {
      if (this.searchmode != 0) {
        this.searchmode = 0;
        this.$refs.datalist
          .clearParams()
          .addParam("sortType", 0)
          .refresh();
      }
      this.isFilterDialogShowed = false;
      this.isCategoryDialogShowed = false;
    },
    toggleSortType(sortType) {
      this.$refs.datalist
        .clearParams()
        .addParam("sortType", sortType)
        .refresh();
      this.hideFilterDialog();
      this.searchmode = 1;
    },
    noop() {},
    showFilterDialog() {
      this.isFilterDialogShowed = !this.isFilterDialogShowed;
      this.isCategoryDialogShowed = false;
    },
    showGoodsDetail(id) {
      this.$router.push("/goodsdetail?id=" + id);
    },
    hideCategoryDialog() {
      this.isCategoryDialogShowed = false;
    },
    showCategoryDialog() {
      this.isCategoryDialogShowed = !this.isCategoryDialogShowed;
      this.isFilterDialogShowed = false;
    },
    hideFilterDialog() {
      this.isFilterDialogShowed = false;
    }
  }
};
</script>

<style scoped lang="scss">
@import "../../styles/nav";

.searchicon {
  width: 0.3733rem;
  height: 0.3467rem;
  margin-right: 0.1467rem;
}

.box1-wrap {
  padding: 0.4rem 0.4rem;
  overflow: hidden;
}

.goods-points-area {
  color: #999;
  font-size: 0.373rem;
  color: #005a1a;
}
.huiyuan-goods-points-area {
  font-size: 0.32rem;
  padding-top: 0.3rem;
  text-decoration: line-through;
  color: #999;
}

.box1 {
  width: 4.2667rem;
  margin-right: 0.66rem;
  box-sizing: border-box;
  position: relative;
  float: left;
  margin-bottom: 0.4533rem;
}

.box1:nth-child(2n) {
  margin-right: 0;
}

.box1-cover {
  width: 4.2667rem;
  height: 2.6467rem;
}

.goods-tag {
  padding: 0 0.2667rem;
  height: 0.6667rem;
  line-height: 0.6667rem;
  font-size: 0.3733rem;
  color: #fff;
  background-color: #ff2a2a;
  border-radius: 0.0667rem;
  text-align: center;
  position: absolute;
  left: 0;
  top: 0;
}

.goods-tj,
.goods-1 {
  background-color: #ff2a2a;
}

.goods-info {
  padding-top: 0.3733rem;
  line-height: 1;
  .goods-title {
    font-size: 0.3467rem;
    color: #17402a;
    padding-bottom: 0.2267rem;
  }
  .goods-points {
    font-size: 0.3733rem;
    color: #ff2a2a;
  }
  .goods-money {
    font-size: 0.3733rem;
    color: #005a1a;
  }
}

.goods-new,
.goods-2 {
  background-color: #028c3e;
}

.goods-pfzf,
.goods-3 {
  background-color: #ff9517;
}

.filter-area-masker {
  position: fixed;
  z-index: 100;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.45);
  top: 1.1467rem;
}

.category-area-masker {
  top: 1.1467rem;
  position: fixed;
  z-index: 100;
  left: 0;
  right: 0;
  bottom: 0;
  font-size: 0.32rem;
  color: #333333;

  background-color: #fff;
  .categorybtns-before {
    height: 1.1467rem;
  }
  .categorybtns {
    position: fixed;
    left: 0;
    bottom: 0;
    right: 0;
    .categorybtn {
      background-color: #a8a8a8;
      height: 1.1467rem;
      line-height: 1.1467rem;
      text-align: center;
      font-size: 0.4267rem;
      color: #ffffff;
      &:first-child {
        background-color: #a8a8a8;
      }
      &:last-child {
        background-color: #ff2a2a;
      }
    }
  }
  .category-p {
    padding: 0.32rem 0.4rem;
  }
  .category-item-img {
    width: 0.6933rem;
    border-radius: 50%;
    height: 0.6933rem;
  }
  .category-item-txt {
    padding-left: 0.2rem;
    line-height: 1.1em;
  }
  .category-blue-line {
    width: 0.08rem;
    height: 0.5867rem;
    background-color: #28b46b;
  }
  .category-txt {
    font-size: 0.3733rem;
    padding-left: 0.24rem;
    color: #222222;
  }
  .category-items {
    overflow: hidden;
    margin-top: 0.12rem;
    .category-item-wrap {
      width: 33.333%;
      float: left;
      margin-top: 0.2rem;
    }
    .category-item {
      height: 1.0133rem;
      line-height: 1.0133rem;
      padding: 0 0.24rem;
    }
    .category-selected {
      background-color: #ececec;
      border-radius: 4px;
      position: relative;
      &:after {
        width: 0.4667rem;
        height: 0.3067rem;
        position: absolute;
        content: "";
        bottom: 0;
        right: 0;
        background-image: url("../../assets/icons/halfchecked@2x.png");
        background-position: left top;
        background-size: 100% 100%;
        background-repeat: no-repeat;
      }
    }
  }
}

.filter-area {
  position: absolute;
  background-color: #fff;
  top: 0;
  left: 0;
  right: 0;
  padding: 0.6667rem 0.8rem 0.4rem 0.8rem;
  & > div.filter-area-inner {
    overflow: hidden;
    margin-right: -1.04rem;
  }
  img {
    width: 2.0933rem;
    height: 0.84rem;
    float: left;
    margin-bottom: 0.2667rem;
    margin-right: 1.04rem;
  }
}
</style>
